﻿@model JewererBasic.Models.Product
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create Product</h2>
@using (Html.BeginForm("Create", "Product", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="submit" value="SAVE" id="btnSubmit"/>
    <div id="productArea">
        <fieldset>
            <legend>Production Card</legend>
            <p>@Html.ValidationMessageFor(m => m.Id)</p>
            <p>@Html.ValidationMessageFor(model => model.MetalWeight)</p>
            <p>@Html.ValidationMessageFor(model => model.TotalWeight)</p>
            <p>@Html.ValidationMessageFor(model => model.Size)</p>
            <p>@Html.ValidationMessageFor(model => model.IdKind)</p>
            <p>@Html.ValidationMessageFor(model => model.IdUnit)</p>
            <p>@Html.ValidationMessageFor(model => model.IdType)</p>
            <p>@Html.ValidationMessageFor(model => model.IdGamma)</p>
            <p>@Html.ValidationMessageFor(model => model.Drawing)</p>
            <p>@Html.ValidationMessageFor(model => model.PRODUCT_MOULD)</p>
            <p>@Html.ValidationMessageFor(model => model.PRODUCT_COMPONENT)</p>
            <p>@Html.ValidationMessageFor(model => model.PRODUCT_STONE)</p>
            <p>@Html.ValidationMessageFor(model => model.PRODUCT_PROCESS)</p>
            <table>
                <tr>
                    <td align="center">
                        <strong class="myStrong">Product Id</strong>
                    </td>

                    <td align="center">
                        <strong class="myStrong">Metal Weight</strong>
                    </td>
                    <td align="center">
                        <strong class="myStrong">Total Weight</strong>
                    </td>
                    <td align="center">
                        <strong class="myStrong">Size</strong>
                    </td>
                    <td align="center">
                        <strong class="myStrong">Kind</strong>
                    </td>
                    <td align="center">
                        <strong class="myStrong">Unit</strong>
                    </td>
                    <td align="center">
                        <strong class="myStrong">Type</strong>
                    </td>
                    <td align="center">
                        <strong class="myStrong">Gamma</strong>
                    </td>
                    <td align="center">
                        <strong class="myStrong">Image</strong>
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.TextBoxFor(model => model.Id, new { style = "width:150px;", placeholder = "ITem", id = "PCId", required = "required" })
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.MetalWeight, new { id = "PCMetalWeight", @class = "text", style = "width:80px;", placeholder = "Metal Weight" })
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.TotalWeight, new { id = "PCTotalWeight", @class = "text", style = "width:80px; ", placeholder = "Total Weight" })
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.Size, new { id = "PCSize", @class = "text", style = "width:40px;", placeholder = "Size" })
                    </td>
                    <td>
                        @Html.DropDownList("IdKind", null, new { id = "PCKind" })
                    </td>
                    <td>
                        @Html.DropDownList("IdUnit", null, new { id = "PCUnit" })
                    </td>
                    <td>
                        @Html.DropDownList("IdType", null, new { id = "PCType" })
                    </td>
                    <td>
                        @Html.DropDownList("IdGamma", null, new { @id = "PCGamma" })
                    </td>
                    <td>
                        @Html.HiddenFor(m => m.Drawing, new { @id="txtDrawing"})
                        @Html.TextBoxFor(m => m.MyFile, new { type = "file", id="txtMyFile" })
                    </td>
                </tr>
            </table>
        </fieldset>
        <input type="button" value="Add Casting" id="addCasting" />
        <input type="button" value="Add Stone" id="addStone" />
        <input type="button" value="Add Component" id="addComponent" />
        <input type="button" value="Add Process" id="addProcess" />
    </div>

    // casting
    <fieldset id="myfieldset">
        <legend>Casting</legend>
        <div id="castingArea">
            @if (Model.PRODUCT_MOULD != null)
            {
                for (int i = 0; i < Model.PRODUCT_MOULD.Count; i++)
                {
                    <p>
                        <strong>Casting Id</strong>
                        @Html.EditorFor(m => m.PRODUCT_MOULD[i].IdMould)
                        @Html.ValidationMessageFor(m => m.PRODUCT_MOULD[i].IdMould)
                        <strong>Qty</strong>'
                        @Html.EditorFor(m => m.PRODUCT_MOULD[i].Qty)
                        @Html.ValidationMessageFor(m => m.PRODUCT_MOULD[i].Qty)
                        <a href="#" id="remove">Remove </a>
                    </p>
                }
            }
        </div>
    </fieldset>

    // Stone
    <fieldset>
                <legend>Stones</legend>
                <div id="stoneArea">
                    @if (Model.PRODUCT_STONE != null)
                    {
                        for (int i = 0; i < Model.PRODUCT_STONE.Count; i++)
                        {
                            <p>
                                <strong>Stone Id</strong>
                                @Html.EditorFor(m => m.PRODUCT_STONE[i].IdStone)
                                @Html.ValidationMessageFor(m => m.PRODUCT_STONE[i].IdStone)
                                <strong>Qty</strong>
                                @Html.EditorFor(m => m.PRODUCT_STONE[i].Qty)
                                @Html.ValidationMessageFor(m => m.PRODUCT_STONE[i].Qty)
                                <strong>Weight</strong>
                                @Html.EditorFor(m => m.PRODUCT_STONE[i].Weight)
                                @Html.ValidationMessageFor(m => m.PRODUCT_STONE[i].Weight)
                                <a href="#" id="remove">Remove </a>
                            </p>
                        }
                    }
                </div>
            </fieldset>

    // component
    <fieldset>
                        <legend>Component</legend>
                        <div id="componentArea">
                            @if (Model.PRODUCT_COMPONENT != null)
                            {
                                for (int i = 0; i < Model.PRODUCT_COMPONENT.Count; i++)
                                {
                                    <p>
                                        <strong>Component Id</strong>
                                        @Html.EditorFor(m => m.PRODUCT_COMPONENT[i].IdComponent)
                                        @Html.ValidationMessageFor(m => m.PRODUCT_COMPONENT[i].IdComponent)
                                        <strong>Weight</strong>
                                        @Html.EditorFor(m => m.PRODUCT_COMPONENT[i].Weight)
                                        @Html.ValidationMessageFor(m => m.PRODUCT_COMPONENT[i].Weight)
                                        <a href="#" id="remove">Remove </a>
                                    </p>
                                }
                            }
                        </div>
                    </fieldset>

    // process
    <fieldset>
        <legend>Process</legend>
        <div id="processArea">
            @if (Model.PRODUCT_PROCESS != null)
            {
                for (int i = 0; i < Model.PRODUCT_PROCESS.Count; i++)
                {
                    <p>
                        @Html.HiddenFor(m => m.PRODUCT_PROCESS[i].IdProcess)
                        <strong>Process</strong>
                        @Html.EditorFor(m => m.PRODUCT_PROCESS[i].ProcessName)
                        @Html.ValidationMessageFor(m => m.PRODUCT_PROCESS[i].ProcessName)
                        <strong>Time</strong>
                        @Html.EditorFor(m => m.PRODUCT_PROCESS[i].Time)
                        @Html.ValidationMessageFor(m => m.PRODUCT_PROCESS[i].Time)
                        <a href="#" id="remove">Remove </a>
                    </p>
                }
            }
        </div>
    </fieldset>

    <p><strong>Remark</strong></p>
    @Html.TextAreaFor(m => m.Remark, new { id = "remark", rows = "7", cols = "100" })
}

@section Scripts
{     
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
    @*Remove additional elements*@
    <script type="text/javascript">

        $('#btnSubmit').click(function () {
            $('#txtDrawing').val($('#txtMyFile').val());
        });

        $(document).on("click", "#remove", function () {
            $(this).parents('p').remove();
            return false;
        });

        $(function () {
            $('#castingArea').find('p').each(function (i, e) {
                MouldAutoComplete($(this).children()[1]);
            });

            $('#stoneArea').find('p').each(function (i, e) {
                StoneAutoComplete($(this).children()[1]);
            });

            $('#processArea').find('p').each(function (i, e) {
                ProcessAutoComplete($(this).children()[1]);
            });

            $('#componentArea').find('p').each(function (i, e) {
                ComponentAutoComplete($(this).children()[1]);
            });
        });

    </script>

    @*Add Mould*@
    <script type="text/javascript">
        $('#addCasting').click(function () {
            var index = $("#castingArea").find("p").length;
            $('#castingArea').append(
                            '<p class="pCastingTag">'
                           + '<strong >Casting Id</strong>'
                           + '<input type="text" id="PRODUCT_MOULD_' + index + '__IdMould" name="PRODUCT_MOULD[' + index + '].IdMould" style = "width:150px;" >'
                           + '<strong >Qty</strong>'
                           + '<input type="number" id="PRODUCT_MOULD_' + index + '__Qty" name="PRODUCT_MOULD[' + index + '].Qty">'
                           + '<a href="#" id="remove">Remove </a>'
                           + '</p>');
            var mould = $("#PRODUCT_MOULD_" + index + "__IdMould");
            MouldAutoComplete(mould);
        });
    </script>

    @*Add Stone*@
    <script type="text/javascript">
        $('#addStone').click(function () {
            var index = $("#stoneArea").find("p").length;
            $('#stoneArea').append(
                            '<p class="pStoneTag">'
                           + '<strong >Stone Id</strong>'
                           + '<input type="text" id="PRODUCT_STONE_' + index + '__IdStone" name="PRODUCT_STONE[' + index + '].IdStone">'
                           + '<strong >Qty</strong>'
                           + '<input type="number" id="PRODUCT_STONE_' + index + '__Qty" name="PRODUCT_STONE[' + index + '].Qty">'
                           + '<strong >Weight</strong>'
                           + '<input type="text" id="PRODUCT_STONE_' + index + '__Weight" name="PRODUCT_STONE[' + index + '].Weight">'
                           + '<a href="#" id="remove">Remove </a>'
                           + '</p>');
            var stone = $("#PRODUCT_STONE_" + index + "__IdStone");
            StoneAutoComplete(stone);
        });
    </script>

    @*Add Component*@
    <script type="text/javascript">
        $('#addComponent').click(function () {
            var index = $("#componentArea").find("p").length;
            if (index > 0) {
                alert("Can't add more than 1 Component");
                return;
            }

            $('#componentArea').append(
                            '<p class="pComponentTag">'
                           + '<strong >Component Id</strong>'
                           + '<input type="text" id="PRODUCT_COMPONENT_' + index + '__IdComponent" name="PRODUCT_COMPONENT[' + index + '].IdComponent" style = "width:150px;" >'
                           + '<strong >Weight</strong>'
                           + '<input type="text" id="PRODUCT_COMPONENT_' + index + '__Weight" name="PRODUCT_COMPONENT[' + index + '].Weight">'
                           + '<a href="#" id="remove">Remove </a>'
                           + '</p>');
            var component = $("#PRODUCT_COMPONENT_" + index + "__IdComponent");
            ComponentAutoComplete(component);
        });
    </script>

    @*Add Process*@
    <script type="text/javascript">
        $('#addProcess').click(function () {
            var index = $("#processArea").find("p").length;
            $('#processArea').append(
                            '<p class="pProcessTag">'
                           + '<strong >Process</strong>'
                           + '<input type="text" id="PRODUCT_PROCESS_' + index + '__ProcessName" name="PRODUCT_PROCESS[' + index + '].ProcessName" style = "width:150px;" >'
                           + '<input type="hidden" id="PRODUCT_PROCESS_' + index + '__IdProcess" name="PRODUCT_PROCESS[' + index + '].IdProcess">'
                           + '<strong >Time</strong>'
                           + '<input type="number" value="0" id="PRODUCT_PROCESS_' + index + '__Time" name="PRODUCT_PROCESS[' + index + '].Time">'
                           + '<a href="#" id="remove">Remove </a>'
                           + '</p>');
            var process = $("#PRODUCT_PROCESS_" + index + "__ProcessName");
            var process_id = $("#PRODUCT_PROCESS_" + index + "__IdProcess");
            ProcessAutoComplete(process, process_id);
        });
    </script>

    @*Define Auto Complete Functions*@
    <script type="text/javascript">
        function ComponentAutoComplete(tb)
        {
            $(tb).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Common/AutoCompleteComponent',
                        data: { query: request.term },
                        dataType: 'json',
                        type: 'GET',
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item,
                                    value: item
                                }
                            }));
                        },
                    })
                },
                select: function (event, ui) {
                    $(tb).val(ui.item.label);
                    return false;
                },
                minLength: 1
            });
        }

        function StoneAutoComplete(tb)
        {
            $(tb).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Common/AutoCompleteStone',
                        data: { query: request.term },
                        dataType: 'json',
                        type: 'GET',
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item,
                                    value: item
                                }
                            }));
                        },
                    })
                },
                select: function (event, ui) {
                    $(tb).val(ui.item.label);
                    return false;
                },
                minLength: 1
            });
        }

        function MouldAutoComplete(tb)
        {
            $(tb).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Common/AutoCompleteMould',
                        data: { query: request.term },
                        dataType: 'json',
                        type: 'GET',
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item,
                                    value: item
                                }
                            }));
                        },
                    })
                },
                select: function (event, ui) {
                    $(tb).val(ui.item.label);
                    return false;
                },
                minLength: 1
            });
        }

        function ProcessAutoComplete(tbProcess, tbProcessId)
        {
            $(tbProcess).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Common/AutoCompleteProcess',
                        data: { query: request.term, type: "NonWaiting" },
                        dataType: 'json',
                        type: 'GET',
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.ProcessName,
                                    value: item.IdProcess
                                }
                            }));
                        },
                    })
                },
                select: function (event, ui) {
                    $(tbProcess).val(ui.item.label);
                    $(tbProcessId).val(ui.item.value);
                    return false;
                },
                minLength: 1
            });
        }
    </script>    
}
